<template>
  <div class="ECard">
    <div class="left">
      <el-card class="box-card">
        <div slot="header" class="header">
          <span style="font-size: 14px">{{ leftTitle }}</span>
          <el-select
            v-model="value"
            placeholder="请选择"
            v-if="selectArray"
            @change="selectChange"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <slot name="left"></slot>
      </el-card>
    </div>
    <div class="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">{{ centerTitle }}</span>
          <span style="font-size: 14px; margin-left: 2px" v-if="centerIlabel"
            >( <i class="ilabel">{{ centerIlabel }}</i> )</span
          >
        </div>
        <slot name="center"></slot>
      </el-card>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">{{ rightTitle }}</span>
          <span style="font-size: 14px; margin-left: 2px" v-if="rightIlabel"
            >( <i class="ilabel">{{ rightIlabel }}</i> )</span
          >
        </div>
        <slot name="right"></slot>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "ECard",
  props: {
    leftTitle: {
      type: String,
      default: "左侧标题",
    },
    centerTitle: {
      type: String,
      default: "中间标题",
    },
    rightTitle: {
      type: String,
      default: "右侧标题",
    },
    centerIlabel: {
      type: String,
    },
    rightIlabel: {
      type: String,
    },
    // 下拉框选中数据
    selectData: {
      type: String,
    },
    // 下拉框数据源
    selectArray: {
      type: Array,
    },
  },
  computed: {},
  data() {
    return {
      options: [],
      value: "",
    };
  },
  methods: {
    selectChange(val) {
      this.$emit("selectValue", val);
    },
  },
  watch: {
    selectData: {
      handler(newVal) {
        this.value = newVal;
      },
      immediate: true,
    },
    selectArray: {
      handler(newVal) {
        this.options = newVal;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.ECard {
  display: flex;
  justify-content: space-between;
  .left,
  .right,
  .center {
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    min-height: calc(100vh - 124px);
    ::v-deep .el-card {
      height: 100%;
      .el-card__header {
        height: 66px;
        line-height: 34px;
      }
      .el-card__body {
        height: calc(100vh - 192px);
      }
    }
    .ilabel {
      font-style: normal;
      color: red;
    }
  }
  .left {
    width: 20%;
  }
  .center {
    width: 20%;
  }
  .right {
    width: 58%;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
